<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑项目</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker.min.css">
</head>
<body>
    <div class="container mt-4">
        <div class="row mb-3">
            <div class="col">
                <h2>编辑项目</h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a th:href="@{/project/list}">项目列表</a></li>
                        <li class="breadcrumb-item"><a th:href="@{/project/{id}(id=${project.id})}">项目详情</a></li>
                        <li class="breadcrumb-item active" aria-current="page">编辑项目</li>
                    </ol>
                </nav>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">项目信息</h5>
                    </div>
                    <div class="card-body">
                        <div id="message-area"></div>
                        
                        <form id="projectForm">
                            <input type="hidden" id="id" th:value="${project.id}">
                            
                            <div class="form-group">
                                <label for="name">项目名称 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" th:value="${project.name}" placeholder="请输入项目名称" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="description">项目描述</label>
                                <textarea class="form-control" id="description" rows="3" placeholder="请输入项目描述" th:text="${project.description}"></textarea>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="startDate">开始日期</label>
                                    <input type="text" class="form-control datepicker" id="startDate" 
                                           th:value="${project.startDate != null ? #dates.format(project.startDate, 'yyyy-MM-dd') : ''}" 
                                           placeholder="选择开始日期">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="endDate">结束日期</label>
                                    <input type="text" class="form-control datepicker" id="endDate" 
                                           th:value="${project.endDate != null ? #dates.format(project.endDate, 'yyyy-MM-dd') : ''}" 
                                           placeholder="选择结束日期">
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label for="managerId">项目经理</label>
                                <select class="form-control" id="managerId">
                                    <option value="">-- 请选择项目经理 --</option>
                                    <option th:each="manager : ${managers}" 
                                            th:value="${manager.id}" 
                                            th:text="${manager.realName}"
                                            th:selected="${project.managerId == manager.id}"></option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="status">项目状态</label>
                                <select class="form-control" id="status">
                                    <option value="1" th:selected="${project.status == 1}">未开始</option>
                                    <option value="2" th:selected="${project.status == 2}">进行中</option>
                                    <option value="3" th:selected="${project.status == 3}">已完成</option>
                                    <option value="4" th:selected="${project.status == 4}">已取消</option>
                                </select>
                            </div>
                            
                            <div class="text-right">
                                <a th:href="@{/project/{id}(id=${project.id})}" class="btn btn-secondary">
                                    <i class="fa fa-arrow-left"></i> 返回详情
                                </a>
                                <button type="button" id="submitBtn" class="btn btn-primary">
                                    <i class="fa fa-save"></i> 保存
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">帮助信息</h5>
                    </div>
                    <div class="card-body">
                        <p><i class="fa fa-info-circle text-info"></i> <strong>项目名称：</strong>请输入项目的正式名称，该名称将显示在项目列表中。</p>
                        <p><i class="fa fa-info-circle text-info"></i> <strong>项目描述：</strong>简要描述项目的目标、范围和背景。</p>
                        <p><i class="fa fa-info-circle text-info"></i> <strong>开始/结束日期：</strong>项目的计划开始和结束日期。</p>
                        <p><i class="fa fa-info-circle text-info"></i> <strong>项目经理：</strong>负责管理该项目的用户，具有项目的全部管理权限。</p>
                        <p><i class="fa fa-info-circle text-info"></i> <strong>项目状态：</strong>项目的当前状态，可以根据项目进展随时更新。</p>
                    </div>
                </div>
                
                <div class="card mt-3">
                    <div class="card-header bg-danger text-white">
                        <h5 class="mb-0">危险操作</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-danger"><i class="fa fa-exclamation-triangle"></i> 删除项目将同时删除项目下的所有资源，包括风险记录等，此操作不可恢复。</p>
                        <button type="button" id="deleteBtn" class="btn btn-danger btn-block">
                            <i class="fa fa-trash"></i> 删除项目
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>确定要删除项目"<span th:text="${project.name}"></span>"吗？此操作不可恢复，项目下的所有数据将被永久删除。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" id="confirmDeleteBtn" class="btn btn-danger">确认删除</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script>
        $(function() {
            // 初始化日期选择器
            $('.datepicker').datepicker({
                format: 'yyyy-mm-dd',
                language: 'zh-CN',
                autoclose: true,
                todayHighlight: true
            });
            
            // 表单提交
            $('#submitBtn').click(function() {
                // 表单验证
                if (!$('#name').val()) {
                    showMessage('项目名称不能为空', 'danger');
                    return;
                }
                
                // 收集表单数据
                var projectData = {
                    id: parseInt($('#id').val()),
                    name: $('#name').val(),
                    description: $('#description').val(),
                    startDate: $('#startDate').val() ? $('#startDate').val() : null,
                    endDate: $('#endDate').val() ? $('#endDate').val() : null,
                    managerId: $('#managerId').val() ? parseInt($('#managerId').val()) : null,
                    status: parseInt($('#status').val())
                };
                
                // 发送请求
                $.ajax({
                    url: '/risk-management/project/edit',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(projectData),
                    success: function(response) {
                        if (response.code === 200) {
                            showMessage('项目更新成功', 'success');
                            setTimeout(function() {
                                window.location.href = '/risk-management/project/' + projectData.id;
                            }, 2000);
                        } else {
                            showMessage(response.message || '项目更新失败', 'danger');
                        }
                    },
                    error: function() {
                        showMessage('系统错误，请稍后再试', 'danger');
                    }
                });
            });
            
            // 删除按钮点击事件
            $('#deleteBtn').click(function() {
                $('#deleteModal').modal('show');
            });
            
            // 确认删除
            $('#confirmDeleteBtn').click(function() {
                var projectId = parseInt($('#id').val());
                
                $.ajax({
                    url: '/risk-management/project/delete/' + projectId,
                    type: 'POST',
                    success: function(response) {
                        if (response.code === 200) {
                            $('#deleteModal').modal('hide');
                            showMessage('项目删除成功，即将跳转到项目列表...', 'success');
                            setTimeout(function() {
                                window.location.href = '/risk-management/project/list';
                            }, 2000);
                        } else {
                            $('#deleteModal').modal('hide');
                            showMessage(response.message || '项目删除失败', 'danger');
                        }
                    },
                    error: function() {
                        $('#deleteModal').modal('hide');
                        showMessage('系统错误，请稍后再试', 'danger');
                    }
                });
            });
            
            function showMessage(message, type) {
                $('#message-area').html(
                    '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' +
                    message +
                    '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
                    '<span aria-hidden="true">&times;</span>' +
                    '</button>' +
                    '</div>'
                );
                
                // 滚动到消息区域
                $('html, body').animate({
                    scrollTop: $('#message-area').offset().top - 20
                }, 200);
            }
        });
    </script>
</body>
</html> 